Day15 CSS語法 (上)

2024 iThome 鐵人賽

DAY 15

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 15 篇

16th鐵人賽

zhiz

2024-09-19 22:20:02

46 瀏覽

分享至

CSS是什麼？

CSS是Cascading Style Sheets的縮寫，稱作階層式樣式表，功用是改變網頁的外觀和排版，使得網頁更加美觀與易讀。

樣式規則

CSS樣式表是由樣式規則(style rule)組成，包含選擇器(selector) 、宣告(declaration)。

選擇器：選擇想要改變樣式的 HTML 元素。
宣告：在大括號內寫入屬性名稱並用冒號來設定屬性值，每條宣告用分號隔開。

語法

以下介紹兩種寫法：

在<head>標籤內寫入<style>標籤，可設定其字體顏色、背景顏色、字型和字體大小。
在想要改變樣式的標籤內寫入style屬性。

實作範例

利用CSS語法來更改標題的外觀樣式～
將<h2>的字體顏色設定為藍綠色、背景色為淺青色、字型為標楷體、字型大小為30像素(pixel)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS語法</title>
    <style>
        h2{
            color: #008080;
            background-color: #e0ffff;
            font-family: "標楷體";
            font-size: 30px;
        }

    </style>

</head>
<body>
    <h2>新生茶會</h2>
    <p>我們將舉辦在10/15～</p>
    <p>歡迎大家來認識新朋友！</p>


    
</body>
</html>

利用另一種寫法～

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS語法</title>

</head>
<body>
    <h2  style="color: #008080; background-color: #e0ffff; font-family: 標楷體; font-size: 30px;">新生茶會</h2>
    <p>我們將舉辦在10/15～</p>
    <p>歡迎大家來認識新朋友！</p>


</body>
</html>

上述兩種寫法，網頁呈現的畫面都相同～